<template>
	<view style="width: 100%; height: 100vh;">
		<view style="width: 100%; height: 2%;"></view>
		<view style="width: 100%; height: 5%; text-align: center;">
			<span style=" font-size: 30px;  font-weight: bold;">课程详细</span>
		</view>
		<view style="width: 100%; height: 2%;"></view>
		<!--  -->
		<view style="width: 90%; height: 25%; margin: 0 auto; border-radius: 6px; box-shadow: 0px 2px 10px #dfdfdf; border: 0.3px solid ##d4c8c8;">
			<view style="width: 100%; height: 20%; padding-top: 2%;">
				<view style="width: 5%; height: 4%; padding-left: 5.5%;">
					<u-icon name="calendar" size="35" color="black"></u-icon>
				</view>
				<view style="width: 100%; height: 5%; padding-left: 15.5%; padding-top: 0.6%;">
					<span style="font-size: 20px;  font-weight: bold;">{{ option.planName }}</span>
				</view>
			</view>
			<view style="width: 93%; height: 70%; margin: 0 auto; border-radius: 9px; background-color: #F7F7F7;">
				<view style="width: 100%; height: 8%;"></view>
				<view style="width: 93%; height: 85%; margin: 0 auto;">
<!-- 					<view style="width: 35%; height: 100%; float: left;">
						<image style="width: 100%;height: 100%; border-radius: 5px;" :src="'http://101.43.223.224:8765/image/getImageById?id=' + option.images" mode=""></image>
					</view> -->
					<view style="width: 65%; height: 100%; ">
						<view style="width: 60%; height: 20%; padding-left: 5%; padding-top: 5%;">
							<span style="font-size: 16px;">教练名称：{{ option.coachName }}</span>
						</view>
						<view v-for="coach in coachphoneData" :key="coach.coachId" style="width: 90%; height: 20%; padding-left: 5%; padding-top: 5%;">
							<span style="font-size: 16px;">教练电话：{{ coach.coachPhone }}</span>
						</view>
						<view style="width: 60%; height: 20%; padding-left: 5%; padding-top: 5%;">
							<span style="font-size: 16px;">训练时长：2小时</span>
						</view>
					</view>
				</view>
			</view>
			<view v-for="coach in MemberuserDate" :key="coach.coachId" style="width: 30%; height: 50%; margin-top: -30%; padding-right: 24px; float: right;">
				<image style="width: 100%; height: 100%; border-radius: 5px;" :src="'http://101.43.223.224:8765/image/getImageById?id=' + coach.memberUserPhoto" mode=""></image>
			</view>
		</view>
		<view style="width: 100%; height: 1.5%;"></view>
		<!--  -->
		<view style="width: 90%; height: 50%; margin: 0 auto; border-radius: 6px; box-shadow: 0px 2px 10px #dfdfdf; border: 0.3px solid ##d4c8c8;">
			<view style="width: 90%; height: 10%; padding-left: 5%; padding-top: 5%;">
				<span style="font-size: 20px;  font-weight: bold;">课程安排</span>
			</view>
			<!--  -->
			<view v-for="(item, index) in partData" style="width: 90%; height: 30%; margin: 0 auto; border-radius: 9px; background-color: #F7F7F7;" @click="goaction(item)">
				<view style="width: 100%; height: 8%;"></view>
				<view style="width: 93%; height: 85%; margin: 0 auto;">
					<view style="width: 55%; height: 20%; padding-left: 5%; padding-top: 1%;">
						<span style="font-size: 16px;">动作名称：{{ item.actionName }}</span>
					</view>
					<view style="width: 50%; height: 20%; padding-left: 5%; padding-top: 5%;">
						<span style="font-size: 16px;">训练部位：{{ item.typeName }}</span>
					</view>
					<view style="width: 50%; height: 20%; padding-left: 5%; padding-top: 5%;">
						<span style="font-size: 16px;">动作次数：5组</span>
					</view>
				</view>
				<view style="width: 30%; height: 80%; float: right; margin-top: -29.8%; padding-right: 10px;">
					<image style="width: 100%; height: 100%; border-radius: 5px;" :src="'http://101.43.223.224:8765/image/getImageById?id=' + item.actionImg" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option: {},
				coachphoneData:[],
				partData:[],
				MemberuserDate: [],
			}
		},
		onLoad(options) {
			this.option = JSON.parse(options.row);
			console.log(JSON.parse(options.row))
			this.part();
		},
		created() {
			this.coachphone();
			this.Memberuserload();
		},
		methods: {
			// 点击跳转动作详细
			goaction (item) {
				uni.navigateTo({
					url: '/pages/student/index/action?row=' + JSON.stringify(item),
					animationType: 'slide-out-top',
					animationDuration: 200
				})
			},
			// 教练电话查询
			coachphone() {
			    // 发起查询请求
			    uni.request({
			        url: 'http://127.0.0.1:17000/course/coachphone',
			        method: "GET",
			        data: {
						coachId: uni.getStorageSync('coach'),
					},
			        success: (res) => {
			            if (res.statusCode === 200) {
			                // 将查询结果中的多个任务数据存储到 coachphoneData 数组
			                this.coachphoneData = res.data.data;
			            } else {
			                // 处理请求失败的情况
			                uni.showToast({
			                    title: "请求失败",
			                    icon: "none"
			                });
			            }
			        },
			        fail: (error) => {
			            // 处理请求失败的情况
			            console.log(error)
			            uni.showToast({
			                title: "请求失败",
			                icon: "none"
			            });
			        }
			    });
			},
			// 课程安排查询
			part() {
				console.log(this.option.courseId);
			    // 发起查询请求
			    uni.request({
			        url: 'http://127.0.0.1:17000/course/part',
			        method: "GET",
			        data: {
						courseId: this.option.courseId
					},
			        success: (res) => {
			            if (res.statusCode === 200) {
			                // 将查询结果中的多个任务数据存储到 partData 数组
			                this.partData = res.data.data;
			            } else {
			                // 处理请求失败的情况
			                uni.showToast({
			                    title: "请求失败",
			                    icon: "none"
			                });
			            }
			        },
			        fail: (error) => {
			            // 处理请求失败的情况
			            console.log(error)
			            uni.showToast({
			                title: "请求失败",
			                icon: "none"
			            });
			        }
			    });
			},
			Memberuserload() {
			    // 发起查询请求
			    uni.request({
			        url: 'http://127.0.0.1:17000/memberUser/selectMemberHeadPortrait',
			        method: "GET",
			        data: {
						userId: uni.getStorageSync('userInfo').id
			    	},
			        success: (res) => {
			            if (res.statusCode === 200) {
			                // 将查询结果中的多个任务数据存储到 Coacharray 数组
			                this.MemberuserDate = res.data.data;
			            } else {
			                // 处理请求失败的情况
			                uni.showToast({
			                    title: "请求失败",
			                    icon: "none"
			                });
			            }
			        },
			        fail: (error) => {
			            // 处理请求失败的情况
			            console.log(error)
			            uni.showToast({
			                title: "请求失败",
			                icon: "none"
			            });
			        }
			    });
			},
		}
	}
</script>

<style>
</style>